<template>
	<view class="page">
		<view class="top">
			<view class="l_title"><image src="/static/logo.png"></image><text>多米街本地生活</text></view>
			<view class="b_title">成为团队长 手把手教您月入万元</view>
			<view class="sub">
				<view class="l_sub">线下买单</view>
				<view class="line"></view>
				<view class="l_sub">团购</view>
				<view class="line"></view>
				<view class="l_sub">大牌商城</view>
				<view class="line"></view>
				<view class="l_sub">热门爆品</view>
			</view>
			<view class="level">
				<view class="l_item" @click="changeLevel(1)">
					<view class="img">
						<image src="/static/user/user.png"></image>
						<image v-if="info.curlevel==1||info.curlevel==2||info.curlevel==3" src="/static/user/dui.png" class="done"></image>
					</view>
					<view>升级成为<br>团队长V1</view>
				</view>
				<view class="zhi">
					<text class="cell-more cell-more2 yticon icon-you"></text>
					<text class="cell-more cell-more1 yticon icon-you"></text>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="l_item" @click="changeLevel(2)">
					<view class="img">
						<image src="/static/user/user.png"></image>
						<image v-if="info.curlevel==2||info.curlevel==3" src="/static/user/dui.png" class="done"></image>
					</view>
					<view>升级成为<br>团队长V2</view>
				</view>
				<view class="zhi">
					<text class="cell-more cell-more2 yticon icon-you"></text>
					<text class="cell-more cell-more1 yticon icon-you"></text>
					<text class="cell-more yticon icon-you"></text>
				</view>
				<view class="l_item" @click="changeLevel(3)">
					<view class="img">
						<image src="/static/user/user.png"></image>
						<image v-if="info.curlevel==3" src="/static/user/dui.png" class="done"></image>
					</view>
					<view>升级成为<br>团队长V3</view>
				</view>
			</view>
		</view>
		<view class="up" :class="{'up1':level==1,'up2':level==2,'up3':level==3}"><image src="/static/user/sanjiaoxing.png"></image></view>
		<view class="info">
			<view class="i_title">
				<text>团队长V{{level}}收益</text>
				<text class="i_l_tit">分佣比例为订单毛利润中的占比</text>
			</view>
			<view class="i_list">
				<view class="i_item">
					<view class="i_bold">{{info.off}}%</view>
					<view class="i_sub">（直推）</view>
					<view>充值店</view>
				</view>
				<view class="i_item">
					<view class="i_bold">{{info.discount}}%</view>
					<view class="i_sub">（直推）</view>
					<view>自设折扣店</view>
				</view>
				<view class="i_item">
					<view class="i_bold">{{info.group}}%</view>
					<view class="i_sub">（直推）</view>
					<view>团购</view>
				</view>
				<view class="i_item">
					<view class="i_bold">{{info.sale}}%</view>
					<view class="i_sub">（直推）</view>
					<view>商城</view>
				</view>
				<view class="i_item">
					<view class="i_bold">{{info.peer}}%</view>
					<view class="i_sub">（上级团长划拨）</view>
					<view>平级奖</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view>升级规则 <text class="cell-more yticon icon-you"></text></view>
			<view class="main">
				<view class="m_item" v-for="item in list">
					<view class="m_info">{{item[0]}}</view>
					<view :class="{'m_status':item[2]==1}" v-if="item[2]==1">{{item[1]}}</view>
					<!-- <view :class="{'m_status_no':item[2]==0}" v-else>{{item[1]}} <text class="cell-more yticon icon-you"></text></view> -->
					<view :class="{'m_status_no':item[2]==0}" v-else>{{item[1]}}</view>
				</view>
			</view>
			<view class="tips">
				<view class="t_up"><image src="/static/user/sanjiaoxing2.png"></view>
				<view class="t_info">
					<!-- <rich-text :nodes="list.reverse()[0][3]"></rich-text> -->
					<view>{{tips}}<br>{{tips1}}</view>
					<!-- <image src="/static/jiantou1.png"> -->
				</view>
			</view>
			<button class="p_buttom p_buttom_no" v-if="isClick" @click="submit">立即升级</button>
			<button class="p_buttom" v-else>立即升级</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				level: 1,
				info: [],
				list: [],
				tips: '',
				tips1: '',
				isClick: true,
			};
		},
		onLoad(){
			this.getInfo();
		},
		methods: {
			getInfo(){
				this.$axios('level/info','POST','member',{
					id: this.level
				}).then(res=>{
					this.tips = '';
					this.tips1 = '';
					if(res.data.code==200){
						this.info = res.data.data.info;
						this.list = res.data.data.ruleList;
						this.tips = res.data.data.ruleList[res.data.data.ruleList.length-1][3];
						this.tips1 = res.data.data.ruleList[res.data.data.ruleList.length-1][4];
						res.data.data.ruleList.forEach(item=>{
							if(item[2]==0){
								this.isClick = false;
							}
						})
					}
				})
			},
			submit(){
				this.$axios('level/updateLevel','POST','member',{
					id: this.level
				}).then(res=>{
					if(res.data.code==200){
						this.$api.msg(res.data.data);
					}
				})
			},
			changeLevel(id){
				if(id == this.level) return;
				this.level = id;
				this.getInfo();
			}
		}
	}
</script>

<style lang="scss">
	.page{
		background: #2C0087;
		padding-bottom: 80rpx;
	}
	.cell-more {
	    align-self: baseline;
	    font-size: 28rpx;
	    color: #565353;
	    margin-left: 10rpx;
	}
	.top{
		background: linear-gradient($bg-color, #2C0087);
		color: #fff;
		text-align: center;
		padding-bottom: 10rpx;
		.l_title{
			font-size: 32rpx;
			font-weight: bolder;
			padding-top: 40rpx;
			font-family: monospace;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
		}
		.b_title{
			margin-top: 20rpx;
			font-size: 44rpx;
			font-weight: bolder;
			font-family: monospace;
		}
		.sub{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			.l_sub{
				
			}
			.line{
				width: 1rpx;
				height: 30rpx;
				background: #fff;
				margin: 0 20rpx;
			}
		}
		.level{
			display: flex;
			justify-content: center;
			margin-top: 60rpx;
			.l_item{
				.img{
					width: 130rpx;
					height: 130rpx;
					position: relative;
					background: #fff;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
					image{
						width: 80%;
						height: 80%;
					}
					.done{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						bottom: 2rpx;
						right: 16rpx;
					}
				}
			}
			.zhi{
				margin-top: 45rpx;
				margin: 45rpx 15rpx 0 34rpx;
				.cell-more {
				    align-self: baseline;
				    font-size: 34rpx;
				    color: #fff;
				    margin-left: -10rpx;
					font-weight: bolder;
				}
				.cell-more1{
					color: #c7cace;
					opacity: 0.75;
				}
				.cell-more2{
					opacity: 0.4;
				}
			}
		}
	}
	.up{
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.up1{
		text-align: left;
		padding-left: 100rpx;
	}
	.up2{
		text-align: center;
	}
	.up3{
		text-align: right;
		padding-right: 100rpx;
	}
	.content{
		background: #fff;
		width: 94%;
		margin: 0 auto;
		padding: 40rpx 20rpx;
		color: #565353;
		border-radius: 20rpx;
		.main{
			padding: 0 20rpx;
			.m_item{
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				.m_info{
					color: #000;
					flex: 1;
					margin-right: 10rpx;
				}
				.m_status_no{
					color: red;
					white-space: nowrap;
					.cell-more{
						color: red;
						margin-right: -30rpx;
						white-space: nowrap;
					}
				}
			}
		}
		.tips{
			.t_up{
				margin-left: 20rpx;
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
			.t_info{
				background: #f2f4ff;
				border-radius: 15rpx;
				// display: flex;
				// justify-content: space-between;
				padding: 20rpx 15rpx;
				margin-top: -20rpx;
				line-height: 1.7;
				align-items: center;
				color: #000;
				box-shadow: 4rpx 5rpx 17rpx -5rpx #ddd;
				view{
					word-break: keep-all;
				}
				image{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.p_buttom{
			background: #b7c5f6;
			color: #fff;
			border: none;
			margin-top: 50rpx;
			letter-spacing: 6rpx;
		}
		.p_buttom_no{
			background: #5679f3;
		}
	}
	.info{
		background: #fff;
		border-radius: 20rpx;
		width: 94%;
		margin: 30rpx auto;
		padding: 20rpx;
		margin-top: -22rpx;
		.i_title{
			font-size: 32rpx;
			border-bottom: 2rpx solid #d8d5d5;
			padding-bottom: 15rpx;
			.i_l_tit{
				font-size: 24rpx;
				color: #666;
				margin-left: 15rpx;
			}
		}
		.i_list{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			padding: 20rpx 0 10rpx;
			font-size: 32rpx;
			.i_bold{
				font-weight: bold;
			}
			.i_sub{
				font-size: 24rpx;
				color: #999;
				margin: 8rpx 0;
			}
		}
	}
</style>
